<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./字体图标/iconfont.css">
    <link rel="stylesheet" href="./css/zhuce.css">
    <link rel="stylesheet" href="./css/movies.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
     <!-- 头部 -->
     <div class="header">
        <!-- 导航条 -->
        <div class="navigation">
            <h1>电影网</h1>
            <ul id="chao">
                <li><a href="index.html">首页</a></li>
                <li><a href="#xiju">喜剧</a></li>
                <li><a href="#mo">冒险</a></li>
                <li><a href="#yugao">即将播出</a></li>
            </ul>
            <div class="icon">
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-xiaoxi"></i >
                <div>
                    <a href="zhuce.html" style="color: #fff;">
                        <p>账户</p>
                        <i class="iconfont icon-geren uname"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- 背景图 -->
        <div class="bei">
            <div class="bei_tu">
                <img src="./img/page-header-bg.jpg" alt="">
            </div>
            <!-- 阴影 -->
            <div class="bei_ti">
                <h1>电影.</h1>
            </div>
        </div>
    </div>
    <!-- 电影 -->
    <div class="navbar">
        <div class="content">
            <!-- 喜剧 -->
            <div class="xiju" id="xiju">
                <div class="cont-xiju">
                    <div class="xi-title">
                        <p>ONLINE STREAMING</p>
                        <h1>喜剧</h1>
                    </div>
                    <div class="xi-content">
                        <div class="xi-img">
                            <img src="./电影图/movies01 (1).jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>国王</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies02.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>社会生活</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies03.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>爱丽丝</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies04.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>斯卡利</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies05.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>婢女</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies06.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>世界末日</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies07.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>四个男人</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies08.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>出发旅行</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies09.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>小男孩也有烦恼</h3>
                        </div>
                        <div class="xi-img">
                            <img src="./电影图/movies10.jpg" alt="">
                            <div class="time">
                                <p>190分钟, <span>喜剧</span></p>
                                <p>PG13</p>
                            </div>
                            <h3>下厨</h3>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 冒险 -->
            <div class="mao" id="mo">
                <div class="cont-mao">
                        <div class="xi-title">
                            <p>ONLINE STREAMING</p>
                            <h1>冒险</h1>
                        </div>
                        <div class="xi-content">
                            <div class="xi-img">
                                <img src="./电影图/movies01 (1).jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>国王</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies02.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>社会生活</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies03.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>爱丽丝</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies04.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>斯卡利</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies05.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>婢女</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies06.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>世界末日</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies07.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>四个男人</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies08.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>出发旅行</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies09.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>小男孩也有烦恼</h3>
                            </div>
                            <div class="xi-img">
                                <img src="./电影图/movies10.jpg" alt="">
                                <div class="time">
                                    <p>190分钟, <span>冒险</span></p>
                                    <p>PG13</p>
                                </div>
                                <h3>下厨</h3>
                            </div>
                        </div>
                    
                </div>
            </div>
            <!-- 预告 -->
            <div class="yugao" id="yugao">    
                <div class="cont-yugao">
                    <div class="yu-left">
                        <span>最新预告</span>
                        <h1>即将播放的电影</h1>
                        <p>视频制作与制作视频内容一起工作。它是电影制作的类比，但图像是数字记录的，而不是胶片。视频制作有三个层次：制作、预制作和后期制作。</p>
                    </div>
                    <div class="yu-right">
                        <div class="swiper-container" id="s">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="./电影图/2.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="./电影图/3.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    
                                    <img src="./电影图/4.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    
                                    <img src="./电影图/5.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    
                                    <img src="./电影图/6.jpg" alt="">
                                </div>
                            </div>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
                <!-- 版权 -->
            <div class="copyright">
                <div class="cop-zt">
                    <p>
                        <i class="iconfont icon-banquan-xian"></i>
                        2020 jQuery大作业 | 电影网站
                    </p>
                    <p>版权所有</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/swiper.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.easing.min.js"></script>
<script>
    var s2 = new Swiper("#s", {
			slidesPerView: 2,//一屏几张图
			spaceBetween: 50,//图间间距
			autoplay: {
				delay: 2000,//换图时间
				disableOnInteraction: false//操作后轮播不停止
			},
			loop: true,
			
		});
    $("#chao a").click(function(){
	    var $anchor=$(this);
        $('html,body').stop().animate({
            scrollTop:$($anchor.attr('href')).offset().top},1000,'easeInOutExpo');
            return false;
	})
</script>
</html>